<template>
<div>
    <div class="branch_bar">
		<div class="branch" >
			<ul>
				<li>
					<a><img :src="img.img2" ></a>
				</li>
				<li>
					<a><img :src="img.img3"> </a>
				</li>
				<li>
					<a><img :src="img.img1" ></a>
				</li>
				<li>
					<a><img :src="img.img4" ></a>
				</li>
			</ul>
			<span class="prev">&lt;</span>
			<span class="next">&gt;</span>
			
		</div>
		
	</div>
	<div class="content">
		<div class="main-form-container">
			<div class="chose">
				<ul>
					<li><a href="javascript:;" class=" titag" >注册</a></li>
					<li><a href="javascript:;" class="titag crt">登录</a></li>
					<li><a href="javascript:;" class="titag">下载APP</a></li>
				</ul>
			</div>
			<div class="main-form">
				<div class="m-reg tab unshow" >
					<div class="reg-left">
						<router-link to="/register" class="reg-cho w-btn3-01">手机账号注册</router-link> 
					</div>
					<div class="reg-center">或</div>
					<div class="reg-right">
						<a href="javascript:;" class="reg-cho w-btn3 w-btn3-01">网易邮箱注册</a>
						<a href="javascript:;"  class="reg-cho w-btn3 w-btn3-02">新浪微博注册</a>
						<a href="javascript:;" class="reg-cho w-btn3 w-btn3-03">腾讯QQ注册</a>
						<a href="javascript:;" class="reg-cho w-btn3 w-btn3-04">微信注册</a>
					</div>
				</div>
				<div class="m-login tab unshow selected" >
					<div class="cont f-cb ztag">
						<div class="log-left">
								<div class="inputbox" id="account-box">
									<div class="u-input box ">
									 <input type="text" data-placeholder="用户名" name="iphNum" data-type="iphNum" id="inp-holder"
									 placeholder="用户名" v-model="uname" class="u-user">
									</div>

								</div>
								<div class="inputbox" id="">
									<div class="u-input box">
										<input type="password" v-model="upwd" placeholder="密码"  class="u-psd">
									</div>
								</div>
								<div class="word-tips unshow">
									<span class="r-tip"></span>
									<span class="r-tip-word">请填写正确的用户名或密码</span>
								</div>
								<div class="f-cb loginbox" @click="checkLogin">
									 <a href="javascript:;" id="dologin" data-action="dologin" class="u-loginbtn">登&nbsp;&nbsp;陆</a>
								</div>
								<span
								 class="m-unlogin">
									<span class="b-unlogin j-unlogin">
										<span class="u-checkbox tabfocus u-checkbox-select" >
											<input type="checkbox" id="un-login" class="un-login">
											<label for="un-login">十天内免登陆</label>
										</span>
									</span>>
								</span>
								<a href="javascript:;" class="forgetpwd j-redirect">忘记密码?</a>
						</div>
						<div class="log-center">或</div>
						<div class="log-right">
							<ul>
								<li class="w1 tel">
									<a href="javascript:;" class="reg-cho  w-btn3 w-btn3-01">网易邮箱登陆</a>
								</li>
								<li class="w1 tel">
									<a href="javascript:;" class="reg-cho w-btn3 w-btn3-02">新浪微博登陆</a>
								</li>
								<li class="w1 tel">
									<a href="javascript:;" class="reg-cho w-btn3 w-btn3-03">腾讯QQ登陆</a>
								</li>
								<li class="w1 tel">
									<a href="javascript:;" class="reg-cho w-btn3 w-btn3-04">微信登陆</a>
								</li>
							
							</ul>
						</div>
					</div>
				</div>
				<div class="m-dwdapp tab unshow">
					<div class="dwd-left">
						<div class="dwd-ip">
							<label for="" class="ip">iphone版:</label>
							<a href="javascript:;" class="w-btn5">iphone</a>
						</div>
						
						<div class="dwd-aj">
							<label for="" class="aj">Android版:</label>
							<a href="javascript:;" class="w-btn5 w-btn5-2">android</a>
						</div>
						
					</div>
					<div class="dwd-right">
						<img :src="img.ewn" alt="">
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</template>
<script>
import {Toast} from 'mint-ui'
import $ from "jquery"
import 'jquery-ui-dist/jquery-ui'
import "../assets/ToolFile/mylogin.css"
export default {
    name:'Login',
    data() {
        return {
           uname:'',
           upwd:'',
           img:{
               ewn:require("../assets/loginIMG/ewm.png"),
               img1:require("../assets/loginIMG/1.jpg"),
               img2:require("../assets/loginIMG/2.jpg"),
               img3:require("../assets/loginIMG/3.jpg"),
               img4:require("../assets/loginIMG/4.jpg"),
           } 
        }
    },
    methods: {
        checkLogin(){
          if(this.uname==""||this.upwd==""){
            Toast({message:"不要空格哟",position:'top',duration:1000});
          }
          $.ajax({
          url: "http://localhost/signin.php",
          type: "get",
          data: { uname: this.uname, upwd: this.upwd},
          success: (result) => {
              if(result=='true'){
                  $('.word-tips').addClass('unshow');
                  Toast({message:`欢迎进入啵啵,亲爱的,${this.uname}`,position:'top',duration:1000});           
                    this.$router.push({path:'/home',name:'Home',params:{uname:this.uname}})
              }else{ 
                  $('.word-tips').removeClass('unshow');
              }
            }
        })
        }
    },
    mounted () {
        this.uname=this.$route.params.uname;
        $(".u-psd").focus();
        $(()=>{
			$('.chose li').click(function(){
				$(this).children().addClass('crt')
				$(this).siblings().children().removeClass('crt')
				var ind=$(this).index();
				$('.tab').eq(ind).show().siblings().hide();
			})
			var timer = '';
			var branch_len = $('.branch li').length;
			var branch_img_len = $('.branch img').width();
			var branch_img_count_len = parseInt(branch_len * branch_img_len);
		
			$(".next").click(function(){
				if(!$(".branch li:first").is(":animated")){
					$(".branch li:first").animate({'marginLeft':'-=2000px'},10,function(){
						$(".branch li:first").css('marginLeft',0);
						$('.branch').append($(".branch li:first"));
					});
				}
			});
		
			$(".prev").click(function(){
				if(!$(".branch li:first").is(":animated")){
					$('.branch').prepend($(".branch li:last"));
					$('.branch li:first').css({'marginLeft':'-2000px'});
					$(".branch li:first").animate({'marginLeft':'+=2000px'},10,function(){
						$(".branch li:first").css('marginLeft','0px');
					});
				}
			});
	        timer = setInterval(function(){
				$(".next").click();
			},20000);
	        $(".branch_bar").mouseenter(function(){
				clearInterval(timer);
			});
			$(".branch_bar").mouseleave(function(){
				timer = setInterval(function(){
					$(".next").click();
				},20000)
			});
        });
    }
}
</script>
<style scoped>
   
</style>